同步 (Synchronous)

• 必須先弄完一項之後再去處理另一項（先完成 A 才能做 B、C、D ...），整個流程會被前一個步驟卡住
• JS是屬於同步

非同步 (Asynchronous)

• 處理事件的流程不會被「卡住」

• JS雖然是屬於同步，但是當他去呼叫其它資源使用時，因為無法準確確認完成時間就會以非同步的方式執行

  範例：

  1. setTimeout：屬於 Web API JS 去呼叫瀏覽器來請求定時的功能參考，並非 JS 本身來計算時間

     function wash(){
     	console.log('洗碗');
     }
     
     function callSomeone(someone){
     	console.log('打給'+ someone);
     
     	setTimeout(function(){
     		console.log( someone + '回電')
     	},0);	
     }
     
     function doWork(){
     	var auntie = "漂亮阿姨";
     
     	callSomeone(auntie)
     	wash()
     }
     
     doWork();
     
     //打給漂亮阿姨
     //洗碗
     //漂亮阿姨回電
     

     

     等所有程式碼都執行完後才會執行事件佇列裡的程式碼，所以「漂亮阿姨回電」就變成最後一個被執行的程式碼

     for (var i = 0; i < 3; i++){
     	setTimeout(function(){
     		console.log(i)
     	},0);	
     }
     
     //3
     //3
     //3
     

     setTimeOut 在此執行的結果就是 i 的最終值

  2. addEventListener：另外如 addEventListener, Ajax 都是這樣的概念 (但不一定都屬於 Web API)都是 JS 呼叫外部資源來達成所以並非是函式內的函式而是調用其它資源所造成的喔

     <p>點我</p>
     
     function clickMe(){
     	console.log('click')
     }
     
     var dom = document.querySelector('p');
     dom.addEventListener('click', clickMe, false);